'use client'

import { useEffect } from 'react'
import { Card } from '@/components/ui/card'
import Loading from '@/components/Loading'
import useRequest from '@/utils/request'
import { Mail } from './components/mail'
import { useSelector, useDispatch } from 'react-redux'
import { selectCurProject } from '@/store/project-slice'
import { selectMentions, selectPaginationConfig, fetchPaginatedData } from '@/store/mention-slice'
import MobileList from './mobile-list'

export default function Mentions() {
  const curProject = useSelector(selectCurProject)
  const mentions = useSelector(selectMentions)
  const paginationConfig = useSelector(selectPaginationConfig)
  const dispatch = useDispatch()

  const { error } = useSelector(state => state.mention)

  useEffect(() => {
    if (!curProject) {
      return
    }

    dispatch(
      fetchPaginatedData({
        project_id: curProject.id,
        replyType: paginationConfig.replyType,
        current: paginationConfig.currentPage,
        pageSize: paginationConfig.perPage,
      })
    )
  }, [dispatch, paginationConfig, curProject])

  // if (isLoading) {
  //   return <Loading />
  // }

  if (error) return <div>error: {error}</div>

  // if (window.innerWidth < 980) {
  //   return <MobileList mentions={mentions} />
  // }

  return (
    <Card x-chunk="dashboard-06-chunk-0">
      <div className="flex-col md:flex">
        <Mail mentions={mentions} />
      </div>
    </Card>
  )
}
